<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        #allmap {
            height: 800px;
            width: 100%;
            overflow: hidden;
        }
        
        #result {
            width: 100%;
            font-size: 12px;
        }
        
        dl,
        dt,
        dd,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        dt {
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: bold;
            border-bottom: 1px dotted #000;
            padding: 5px 0 5px 5px;
            margin: 5px 0;
        }
        
        dd {
            padding: 5px 0 0 5px;
        }
        
        li {
            line-height: 28px;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=QNoZhXYVNAL1qGsYvt86qYptkGQzGmGH"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <title>带检索功能的信息窗口</title>
</head>

<body>
    <div id="allmap">
    </div>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('allmap');
        var poi = new BMap.Point(119.95570650527955, 30.11676778678073);
        map.centerAndZoom(poi, 18);
        map.enableScrollWheelZoom();

        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
            '<img src="images/hang01.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
            '地址：杭州市富阳县长新乡宋殿村<br/>简介：侵浙日军投降仪式旧址占地4.3亩，旧址坐北朝南，泥石木结构，重檐亭式房屋，1995年9月正式对外公展。' +
            '</div>';

        //创建检索信息窗口对象
        var searchInfoWindow = null;
        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: "侵浙日军投降仪式旧址", //标题
            width: 290, //宽度
            height: 105, //高度
            panel: "panel", //检索结果面板
            enableAutoPan: true, //自动平移
            searchTypes: [
                BMAPLIB_TAB_SEARCH, //周边检索
                BMAPLIB_TAB_TO_HERE, //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var marker = new BMap.Marker(poi); //创建marker对象
        marker.enableDragging(); //marker可拖拽
        marker.addEventListener("click", function(e) {
            searchInfoWindow.open(marker);
        })
        map.addOverlay(marker); //在地图中添加marker
    </script>
</body>

</html>